<template>
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
      <el-table-column align="center" label="用户名" prop="realname" />
      <el-table-column align="center" label="手机号" prop="mobile" />
      <el-table-column align="center" label="生日" prop="birthday" />
      <el-table-column align="center" label="授权类型" prop="authType" />
      <el-table-column align="center" label="授权状态" prop="authStatus" />
      <el-table-column align="center" label="身份证号" prop="certNo" />
      <el-table-column :formatter="dateFormatter" align="center" label="授权时间" prop="createTime" width="180px" />
    </el-table>
    <!-- 分页 -->
    <Pagination 
    v-model:limit="queryParams.pageSize"
     v-model:page="queryParams.pageNo" 
     :total="total"
      @pagination="getList" />
  </ContentWrap>
</template>

<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as MemberApi from '@/api/member/user'
import { ref, reactive, onMounted } from 'vue'

defineOptions({ name: 'UserAuthorizationList' })

const props = defineProps({
  userId: {
    type: Number,
    required: false
  }
})

const loading = ref(true)
const total = ref(0)
const queryParams = reactive({
  userId: null,
  pageNo: 1,
  pageSize: 10
})
const list = ref<Array<any>>([]);

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    queryParams.userId = props.userId as any;
    const data = await MemberApi.getAuthorize(queryParams);
    if  (!data) {
      return
    }
    const authorizeContent = data.authorizeContent;

    if (!authorizeContent) {
      list.value = []; // 处理空值
      total.value = 0;
      return;
    }

    // 处理单条或多条 JSON 字符串
    const parsedData = Array.isArray(authorizeContent)
      ? authorizeContent.map((item) => JSON.parse(item)) // 数组形式（多个 JSON 字符串）
      : [JSON.parse(authorizeContent)]; // 单个 JSON 字符串

    parsedData[0].createTime = data.createTime
    list.value = parsedData;
    total.value = parsedData.length; // 假设 total 为数据长度，需根据后端实际返回调整
  } catch (error) {
    console.error('获取授权列表失败:', error);
    list.value = []; // 错误时清空列表
  } finally {
    loading.value = false;
  }
};

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
